<template>
  <view class="list-detail bg-gray">
    <view class="none-data r-uni-row bg-white" v-if="!faceDataFields" :style="{'height':`calc(100vh - ${detailTop})`}">
      请在列表选择要查看的内容
    </view>
    <view class="list-detail member" v-if="faceDataFields && detailLoaded">
      <view class="member-detail" v-if="service == 'srvretail_store_staff_select'">
        <!-- 员工管理定制详情 -->
        <view v-for="(row,index) in columnRowConfigRun" :key="index">
          <uni-section :title="row.section" style="font-size:2.6rem;" type="line"
            v-if="row.section && row.showType == 'staffUserCard'">
            <!--    <template v-slot:right>
              <view class="button-group padding inline flex">
                <button style="width:auto;" v-for="(button,index) in fromButtons" :key="index" v-if="button.permission"
                  @click="onFormButton(button)" class="cu-btn g-button margin-tb-sm lg">{{button.button_name}}</button>
              </view>
            </template> -->
            <uni-row>
              <uni-col class="padding" :span="row.colspan[colIndex]" v-for="(col,colIndex) in row.columns"
                v-if="row.columns.length > 0">
                <uni-card v-if="row.showType == 'staffUserCard' && col !== '#children'"
                  class="padding-0 border-none text-right" style="border: 0;box-shadow:none;" :isFull="true"
                  sub-title="">
                  <view slot="title" class="user-card" style="justify-content: right;">
                    <image class="user-thumbnail" mode="aspectFill"
                      :src="getImagePath(data.head_portrait) || avatarFace">
                    </image>
                  </view>
                </uni-card>
                <uni-row v-if="row.children && col == '#children'" v-for="(child,r) in row.children" :key="r">
                  <uni-col class="bg-white padding-sm" :span="child.colspan" v-for="(ccol,cc) in child.columns"
                    :key="cc">
                    <view :class=" ccol == 'name' ? 'form-item text-lg' : 'form-item'">
                      <span class="text-bold form-item-label">{{getColumnvalue(ccol,'label')}}:</span><span
                        class="form-item-coutent">{{getColumnvalue(ccol,'value')}}</span>
                      <uni-tag v-if="ccol == 'name'" :text="data.business_status == '是'? '营业员' : ''" type="success"
                        :inverted="true" :circle="true"></uni-tag>
                      <!--   <uni-tag v-if="ccol == 'name'"
                        :text="getColumnvalue('_staff_type_disp','value') +  (data.business_status == '是'? ',营业员' : '')"
                        type="success" :inverted="true" :circle="true"></uni-tag> -->
                    </view>
                  </uni-col>
                </uni-row>
              </uni-col>
            </uni-row>
          </uni-section>
        </view>
        <!--    <auth-tree :readonly="true" :key="data.staff_type" :roleNo="data.staff_type" pageType="detail"
          ref="detailAuthTree" v-if="data.staff_type">
        </auth-tree> -->
      </view>
      <view class="member-detail member-detail-box padding" v-if="service == 'srvretail_member_info_select'">
        <!-- 会员管理定制详情 -->
        <uni-row v-for="(row,index) in columnRowConfigRun" :key="index"
          :class="{'show-y-scroll-bar':row.showType == 'coupon'}">
          <!-- 会员详情特殊 -->
          <view class="user-card padding" v-if="row.showType == 'usercard'">
            <image class="user-thumbnail" mode="aspectFill" :src="getImagePath(data.head_portrait)|| avatarFace">
            </image>
            <view class="padding">{{getColumnvalue(row.columns[1],'value')}}</view>
            <view class="padding">{{getColumnvalue(row.columns[2],'value')}}</view>
          </view>

          <view class="data-panel-card" v-if="row.columns&&row.columns.length>0&&row.showType == 'datapanel'">
            <uni-col class=" padding-sm " v-if="(row.showType == 'datapanel' && row.columns.length > 0)"
              :span="row.colspan" v-for="(col,l) in row.columns" :key="l">
              <view :class="l == 0 ? 'form-item' : 'form-item form-item-column text-center'"
                v-if="col !== '#children' && l == 0">
                <text class="text-bold form-item-label text-lg">{{getColumnvalue(col,'label')}}:</text>
                <text class="form-item-coutent text-lg">{{getColumnvalue(col,'value')}}</text>
              </view>
              <view :class="'form-item form-item-column text-center'" v-if="col !== '#children' && l != 0">
                <text v-if="col==='available_coupon_num'" class="form-item-coutent text-lg  text-blod">
                  {{couponList1.length||'-'}}
                </text>
                <text class="form-item-coutent text-lg  text-blod" v-else>{{getColumnvalue(col,'value')}}</text>
                <text class="text-bold form-item-label  text-lg text-blod">{{getColumnvalue(col,'label')}}</text>
              </view>
              <!-- 字段配置children columns 时显示 -->
              <uni-row v-if="row.children && col == '#children'" v-for="(child,r) in row.children" :key="r">
                <uni-col class="bg-white padding-sm" v-if="child.columns.length > 0" :span="row.colspan"
                  v-for="(ccol,cc) in child.columns" :key="cc">
                  <view class="form-item form-item-column">
                    <text class="text-bold form-item-label">{{getColumnvalue(ccol,'label')}}:</text>
                    <text class="form-item-coutent">{{getColumnvalue(ccol,'value')}}</text>
                  </view>
                </uni-col>
              </uni-row>
            </uni-col>
          </view>
          <view class="coupon-list" v-if="row.showType == 'coupon'">
            <view class="coupon-list-title" v-if="couponList1&&couponList1.length>0">
              可用优惠券 <text>({{couponList1.length}})</text>
            </view>
            <view class="coupon-list-box" v-if="couponList1&&couponList1.length>0">
              <view class="coupon-list-item" v-for="item in couponList1">
                <view class="top invalid"
                  v-if="!item.coupon_title&&!item.discount_num&&!item.coupon_type&&!item.discount_amount">
                  已失效
                </view>
                <view class="top" v-else>
                  <view class="title">
                    <view class="">
                      {{item.coupon_title||''}}
                    </view>
                    <view class="right" v-if="item.discount_num">
                      {{item.discount_num}}折
                    </view>
                  </view>
                  <view class="type">
                    <text>{{item.coupon_type||''}}</text>
                    <text v-if="item.use_threshold==='最低消费'&&item.min_consumption">最低消费{{item.min_consumption}}元</text>
                    <text v-if="item.use_threshold==='无门槛'">无门槛使用</text>
                    <text class="text-green" v-if="item.discount_amount">
                      ￥{{item.discount_amount}}
                    </text>
                  </view>
                </view>
                <view class="bottom">
                  <view class="">
                    <text v-if="item.term_of_validity==='指定具体使用时间'&&item.use_end_time&&item.use_start_time">
                      {{item.use_start_time}}至{{item.use_end_time}}
                    </text>
                    <text v-else> {{item.term_of_validity_str||''}}</text>
                  </view>
                  <view class="btn" @click="toCouponDetail(item,'srvmkt_available_member_coupon_select')">
                    详情
                  </view>
                </view>
              </view>
            </view>
            <view class="coupon-list-title" v-if="couponList2&&couponList2.length>0">
              不可用优惠券 <text>({{couponList2.length}})</text>
            </view>
            <view class="coupon-list-box" v-if="couponList2&&couponList2.length>0">
              <view class="coupon-list-item" v-for="item in couponList2">
                <view class="top invalid"
                  v-if="!item.coupon_title&&!item.discount_num&&!item.coupon_type&&!item.discount_amount">
                  已失效
                </view>
                <view class="top" v-else>
                  <view class="status-badge">
                    {{item.write_off_type_str}}
                  </view>
                  <view class="title">
                    <view class="">
                      {{item.coupon_title||''}}
                    </view>
                    <view class="right" v-if="item.discount_num">
                      {{item.discount_num}}折
                    </view>
                  </view>
                  <view class="type">
                    <text>{{item.coupon_type||''}}</text>
                    <text v-if="item.use_threshold==='最低消费'&&item.min_consumption">最低消费￥{{item.min_consumption}}元</text>
                    <text v-if="item.use_threshold==='无门槛'">无门槛使用</text>
                    <text class="text-green" v-if="item.discount_amount">
                      ￥{{item.discount_amount}}
                    </text>
                  </view>
                </view>
                <view class="bottom">
                  <view class="">
                    <text v-if="item.term_of_validity==='指定具体使用时间'&&item.use_end_time&&item.use_start_time">
                      {{item.use_start_time}}至{{item.use_end_time}}
                    </text>
                    <text v-else> {{item.term_of_validity_str||''}}</text>
                  </view>
                  <view class="btn" @click="toCouponDetail(item,'srvmkt_unable_member_coupon_select')">
                    详情
                  </view>
                </view>
              </view>
            </view>
          </view>
          <uni-col class="bg-white padding-sm" v-if="(row.showType == 'formitem' && row.columns.length > 0)"
            :span="row.colspan" v-for="(col,l) in row.columns" :key="l">
            <view class="form-item" v-if="col !== '#children'">
              <span class="text-bold form-item-label">{{getColumnvalue(col,'label')}}:</span><span
                class="form-item-coutent">{{getColumnvalue(col,'value')}}</span>
            </view>
            <!-- 字段配置children columns 时显示 -->
            <uni-row v-if="row.children && col == '#children'" v-for="(child,r) in row.children" :key="r">
              <uni-col class="bg-white padding-sm" v-if="row.showType == 'datapanel' && row.columns.length > 0"
                :span="row.colspan" v-for="(ccol,cc) in child.columns" :key="cc">
                <view class="form-item">
                  <span class="text-bold form-item-label">{{getColumnvalue(ccol,'label')}}:</span><span
                    class="form-item-coutent">{{getColumnvalue(ccol,'value')}}</span>
                </view>
              </uni-col>
            </uni-row>
          </uni-col>
        </uni-row>
      </view>
      <view class="member-detail bg-white padding-sm"
        v-if="service !== 'srvretail_member_info_select' && service !== 'srvretail_store_staff_select'">
        <!-- 非 会员  员工  -->
        <uni-row :name="row.showType + index" v-for="(row,index) in columnRowConfigRun" :key="index">
          <uni-section :title="row.section" type="line"
            v-if="row.section&& (row.section !== '退货明细'|| refundDetailData.length > 0) ">
            <uni-row>
              <uni-col :name="col+l" class="bg-white padding-sm"
                v-if="(row.showType == 'childlist' && row.columns.length > 0) || row.showType == 'formitem'"
                :span="row.colspan" v-for="(col,l) in row.columns" :key="l">
                <!-- {{row.columns}} -->
                <view class="form-item" v-if="col.indexOf('child|') == -1 && col !== '#children'">
                  <span class="text-bold form-item-label">{{getColumnvalue(col,'label')}}:</span>
                  <span class="form-item-coutent"
                    v-if="service != 'srvretail_store_order_select'|| col != 'order_state'">{{getColumnvalue(col,'value')}}</span>
                  <span class="form-item-coutent"
                    v-if="service == 'srvretail_store_order_select' && col == 'order_state'">
                    <!-- {{getColumnvalue(col,'value')}} -->
                    <uni-tag :inverted="true" :text="getColumnvalue(col,'value')"
                      :type="getColumnvalue(col,'value') == '已结账'?'primary' : 'error'" />
                  </span>
                </view>
                <uni-row v-if="col=='#children'" v-for="(_childrow,r) in row.children" :key="r">
                  <uni-col :name="_childcol+r" class="bg-white padding-sm" :span="24"
                    v-for="(_childcol,r) in _childrow.columns" :key="r">
                    <view class="form-item">
                      <span class="text-bold form-item-label">{{getColumnvalue(_childcol,'label')}}:</span><span
                        class="form-item-coutent">{{getColumnvalue(_childcol,'value')}}</span>
                    </view>
                  </uni-col>
                </uni-row>
                <!-- 字段配置children columns 时显示 -->
                <!-- <uni-row  v-if="row.childList && row.childList.length > 0 && col.indexOf('child|') !== -1" >
									<uni-col  :name="_childcol+r" class="bg-white padding-sm" :span="24" v-for="(_child,r) in row.childList" :key="r">
										<uni-section :title="'child.service_view_name'" type="line"  v-for="(child,c) in childListRun" v-if="childListRun.length > 0 && childExpBuild(child.mainData,child.pkeyProps.showExpr) && getChildConfig(_child,child) " :key="'child'+ c">
											 <childListComp 
											 v-if="childListRun.length > 0"
											 :inPageType="pageType"
											 :name="child.service_name" 
											 :ref="'child-' + child.service_name" 
											 :condition="child.pkeyProps.condition" 
											 :config="child.pkeyProps.config" 
											 :custGridHeader="row.hasOwnProperty('moreConfig') &&row.moreConfig.custGridHeader"
											 >
											 </childListComp>
										</uni-section>
									</uni-col>
								</uni-row> && col.indexOf('child|') !== -1" -->
                <uni-row
                  v-if="row.showType == 'childlist' && orderchildloaded && col.indexOf('child|srvretail_order_detail_select') !== -1">
                  <uni-col class="bg-white padding-sm" :span="24">
                    <uni-table border stripe emptyText="暂无更多数据" v-if="orderchildloaded">
                      <!-- 表头行 -->
                      <uni-tr v-if="orderDetailHeader.length > 0">
                        <uni-th align="center" v-if="headCol.in_list == 1" v-for="(headCol,index) in orderDetailHeader"
                          :key="index">
                          {{headCol.label}}
                        </uni-th>
                      </uni-tr>
                      <!-- 表格数据行 -->
                      <uni-tr v-for="(dataRow,index) in orderDetailData" :key="index" v-if="orderDetailData.length > 0">
                        <uni-td v-if="headCol.in_list == 1" v-for="(headCol,i) in orderDetailHeader" :key="i">
                          <view class="table-td-text" @click="onItemClick(dataRow)">
                            {{dataRow[headCol.columns] ? dataRow[headCol.columns] : '-' }}
                          </view>
                        </uni-td>
                      </uni-tr>

                    </uni-table>
                  </uni-col>
                </uni-row>
                <uni-row
                  v-if="row.showType == 'childlist' && refundchildloaded && col.indexOf('child|srvretail_refund_detail_select') !== -1 && refundDetailData.length > 0">
                  <uni-col class="bg-white padding-sm" :span="24">
                    <uni-table border stripe emptyText="暂无更多数据" v-if="refundchildloaded">
                      <!-- 表头行 -->
                      <uni-tr v-if="refundDetailHeader.length > 0">
                        <uni-th align="center" v-if="headCol.in_list == 1" v-for="(headCol,index) in refundDetailHeader"
                          :key="index">
                          {{headCol.label}}
                        </uni-th>
                      </uni-tr>
                      <!-- 表格数据行 -->
                      <uni-tr v-for="(dataRow,index) in refundDetailData" :key="index"
                        v-if="refundDetailData.length > 0">
                        <uni-td v-if="headCol.in_list == 1" v-for="(headCol,i) in refundDetailHeader" :key="i">
                          <view class="table-td-text" @click="onItemClick(dataRow)">
                            {{dataRow[headCol.columns] ? dataRow[headCol.columns] : '-' }}
                          </view>
                        </uni-td>
                      </uni-tr>

                    </uni-table>
                  </uni-col>
                </uni-row>
              </uni-col>

            </uni-row>
          </uni-section>
          <uni-row v-if="!row.section">
            <uni-col class="bg-white padding-sm"
              v-if="(row.showType == 'datapanel' && row.columns.length > 0) || row.showType == 'formitem' || row.showType == 'childlist'"
              :span="row.colspan" v-for="(col,l) in row.columns" :key="l">
              <view class="form-item" v-if="col !== '#children' && row.showType !== 'childlist'">
                <span class="text-bold form-item-label">{{getColumnvalue(col,'label')}}:</span><span
                  class="form-item-coutent">{{getColumnvalue(col,'value')}}</span>
              </view>
              <!-- 字段配置children columns 时显示 -->
              <uni-row v-if="row.children && col == '#children'" v-for="(child,r) in row.children" :key="r">
                <uni-col :name="ccol+cc" class="bg-white padding-sm"
                  v-if="row.showType == 'datapanel' && row.columns.length > 0" :span="row.colspan"
                  v-for="(ccol,cc) in child.columns" :key="cc">
                  <view class="form-item">
                    <span class="text-bold form-item-label">{{getColumnvalue(ccol,'label')}}:</span><span
                      class="form-item-coutent">{{getColumnvalue(ccol,'value')}}</span>
                  </view>
                </uni-col>
              </uni-row>

            </uni-col>
          </uni-row>
        </uni-row>

      </view>

      <view v-if="fromButtons.length > 0 " class="button-group bg-white"
        style="justify-content: flex-end;height: 12vh;width:100%;padding-right: 2rem;">
        <button @click="onFormButton(button)" class="cu-btn g-button margin-tb-sm lg"
          v-for="(button,index) in fromButtons" :key="index" v-if="button.permission">{{button.button_name}}</button>
        <orderRefund @submit-refund-order="onReLoad" :orderNo="data.order_no"
          v-if="service == 'srvretail_store_order_select' && data.order_state == '已结账'"></orderRefund>
      </view>

    </view>
    <vipcharge @close="vipChargeClose" :curSelectMember="data" :show="showVipCharge" @success="vipChargeRequest"
      @fail="vipChargeRequest" v-if="showVipCharge"></vipcharge>
    <addMember
      v-if="service=='srvretail_member_info_select'&&showUpdateMember&&memberActionType==='update'&&data&&data.menber_no"
      @success="closed(true)" @close="closed" :show="showUpdateMember" :memberNo="data.menber_no"
      :type="memberActionType">
    </addMember>
    <addMember v-else-if="service=='srvretail_member_info_select'&&showUpdateMember&&memberActionType==='add'"
      @success="closed(true)" @close="closed" :show="showUpdateMember" :type="memberActionType">
    </addMember>
    <view class="custom-center-popup">
      <u-popup :show="isEdit" mode="center" :round="20" :overlay="true" :closeable="false" :closeOnClickOverlay="false"
        @close="isEdit = false">
        <view style="width: 80vw;">
          <view class="popup-title" v-if="editServiceName == 'srvretail_store_staff_update'">
            编辑员工
          </view>
          <bx-form :gridCfg="editGridCfg" :serviceName="editServiceName" :pk="formPk" type="update"
            @on-submit="onSubmitForm" @cancel="isEdit = false">
          </bx-form>
        </view>
      </u-popup>
    </view>
    <uni-popup ref="alertDialog" type="dialog" v-if="service == 'srvretail_store_staff_select' && data">
      <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="提示" :content="dialogText"
        @confirm="dialogConfirm">
      </uni-popup-dialog>
    </uni-popup>

    <view class="custom-center-popup">
      <u-popup :show="showForm" :round="20" mode="center" :overlay="true" :closeable="true" :closeOnClickOverlay="false"
        @close="showForm=false">
        <view class="popup-title">
          优惠券详情
        </view>
        <bx-form style="padding-top:0;max-width: 60vw;min-width: 40vw;" :disabled="true" :serviceName="formService"
          :appName="formApp" :type="formType" :pkCol="formIdCol" :pk="formId" @cancel="showForm = false">
        </bx-form>
      </u-popup>
      <u-popup :show="showGiveOutCoupon" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="false" @close="showGiveOutCoupon=false">
        <view class=" padding give-out-dialog ">
          <view class="popup-title">
            发放优惠券
          </view>
          <view class="select-coupon">
            <view class="sub-title ">
              选择优惠券
            </view>
            <view class="coupon-list-box show-y-scroll-bar flex-column ">
              <view class="flex full-width align-center" v-for="item in allCoupon">
                <view class="coupon-list-item">
                  <view class="top">
                    <view class="title">
                      <view class="">
                        {{item.coupon_title||''}}
                      </view>
                      <view class="right" v-if="item.discount_num">
                        {{item.discount_num}}折
                      </view>
                    </view>
                    <view class="type">
                      <text>{{item.coupon_type||''}}</text>
                      <text
                        v-if="item.use_threshold==='最低消费'&&item.min_consumption">最低消费{{item.min_consumption}}元</text>
                      <text v-if="item.use_threshold==='无门槛'">无门槛使用</text>
                      <text class="text-green" v-if="item.discount_amount">
                        ￥{{item.discount_amount}}
                      </text>
                    </view>
                  </view>
                  <view class="bottom">
                    <view class="">
                      <text v-if="item.term_of_validity==='指定具体使用时间'&&item.use_end_time&&item.use_start_time">
                        {{item.use_start_time}} 至 {{item.use_end_time}}
                      </text>
                      <text v-else> {{item.term_of_validity_str||''}}</text>
                    </view>
                    <view class="btn" @click="toCouponDetail(item,'srvmkt_coupon_manage_custom_select')">
                      详情
                    </view>
                  </view>
                </view>
                <view class="flex align-center">
                  <u-number-box :min="0" v-model="item.amount" :max="item.receive_num || 999"></u-number-box>
                </view>
              </view>
            </view>
            <view class="flex justify-between align-center select-coupon-bottom">
              <view class="" v-if="couponCount&&couponCount.type">
                已选择{{couponCount.type}}种，{{couponCount.amount}}张优惠券
              </view>
              <text v-else></text>
              <view class="">
                <button class="button line-white margin-right" @click="showGiveOutCoupon=false">取消</button>
                <button class="button" @click="giveOutCoupon" :class="{disabled:couponCount.amount===0}">确认发放</button>
              </view>
            </view>
          </view>
        </view>
      </u-popup>

    </view>
  </view>
</template>

<script>
  import vipcharge from "@/components/vip-recharge/vip-recharge.vue"
  import orderRefund from "@/components/g-batch-update/refund-order.vue"
  import addMember from "@/components/add-member/add-member.vue"
  import {
    queryMembers
  } from '@/common/api/member.js'
  export default {
    data() {
      return {
        showForm: false,
        formService: "",
        formApp: "",
        formType: "",
        formId: "",
        formIdCol: "",
        showGiveOutCoupon: false,
        couponList: [],
        couponchildloaded: false,
        allCoupon: [],
        couponHeader: [],
        pageType: "detail",
        msgType: 'info',
        dialogName: "",
        v2FieldsData: null,
        faceDataFields: null,
        editServiceName: null,
        formPk: null,
        isEdit: false,
        showVipCharge: false, // 显示会员充值
        showUpdateMember: false, // 会员信息新增，编辑
        memberActionType: 'add',
        data: null,
        avatarFace: require("@/static/images/avatar.png"),
        avtiveButton: null,
        orderDetailHeader: [],
        orderDetailData: [],
        orderchildloaded: false,
        refundDetailHeader: [],
        refundDetailData: [],
        refundchildloaded: false,
        v2Loaded: false,
        editGridCfg: [{
          "range": "2,5",
          "columnGap": "5rem",
          "rowGap": "0rem",
          "cols": [{
              "label": false,
              "limit": 1,
              "col": "head_portrait",
              "area": "1,1,3,2"
            }, {
              "col": "name",
              "grid-column-start": "span 2"
            }, {
              "col": "staff_no",
              "grid-column-start": "span 2"
            },
            {
              "col": "phone",
              "grid-column-start": "span 2"
            }, {
              "col": "staff_type",
              "grid-column-start": "span 2"
            }
          ]
        }, {
          "range": "5,2",
          "columnGap": "0rem",
          "rowGap": "0rem",
          "cols": [{
            "col": "staff_status",
            "grid-column-start": "span 1"
          }, {
            "col": "business_status",
            "grid-column-start": "span 1"
          }, {
            "col": "staff_addr",
            "grid-column-start": "span 2"
          }, {
            "col": "remark",
            "grid-column-start": "span 2",
            "grid-row-start": "span 2"
          }]
        }],
        couponList1: [],
        couponList2: []
      };
    },
    components: {
      vipcharge,
      orderRefund,
      addMember
    },
    created() {
      if (this.service === 'srvretail_member_info_select') {
        this.getCouponList()
      }
    },
    computed: {
      couponCount() {
        return {
          type: this.allCoupon.filter(item => item.amount > 0).length,
          amount: this.allCoupon.reduce((pre, cur) => {
            return pre + cur.amount
          }, 0)
        }
      },
      dialogText() {
        if (this.data?.name && this.dialogName) {
          let textMap = {
            'set': `是否确定将【${this.data.name}】设为营业员？`,
            'delete': `是否确定删除【${this.data.name}】？`,
            'cancel': `是否确定取消【${this.data.name}】营业员资格？`
          }
          return textMap[this.dialogName]
        }
      },

      conditionRun: function() {
        let cond = [{
          colName: "id",
          ruleType: "eq",
          value: this.itemId
        }]
        return cond
      },
      fromButtons: function() {
        let buttons = []

        if (this.service == 'srvretail_store_staff_select') {
          buttons = this.v2FieldsData._formButtons
          buttons = buttons.concat(this.rowButtons)
          buttons = buttons.filter((item) => {
            // if(item.client_type&&item.client_type.indexOf('APP')==-1){
            //   return false
            // }
            let isOn = false
            if (item.permission && item.button_name == '设为营业员' && (this.data.business_status ==
                '否' || !this.data.business_status)) {
              isOn = true
            } else if (item.permission && item.button_name == '取消营业员' && this.data
              .business_status == '是') {
              isOn = true
            } else if (item.permission && item.button_name == '删除') {
              if (item.disp_exps && item.disp_exps ===
                "data.mark_as_special != '是' && data.staff_no != top.user.user_no") {
                if (this.data.mark_as_special !== '是' && this.data.staff_no !== this.loginUser.user_no) {
                  isOn = true
                }
              } else {
                isOn = true
              }
            } else if (item.permission && item.button_name == '编辑' && item.page_area !== '表格行按钮') {
              isOn = true
            }
            if (isOn) {
              return item
            }
          })
          console.log('buttons row', this.rowButtons)
        } else if (this.service == 'srvretail_store_order_select') {
          buttons.push({
            "operate_service": "srvsys_order_print",
            "servcie_type": "operate",
            "page_type": "详情",
            "button_type": "customize",
            "operate_mode": "静默操作",
            "client_type": "PC,APP",
            "operate_params": {
              "data": [{
                "order_no": {
                  "value_type": "rowData",
                  "value_key": "order_no"
                }
              }]
            },
            "id": 287,
            "page_area": "底部按钮",
            "more_config": "{\r\n\t\"button_para\": {\r\n\t\t\"group_tag\": \"操作\"\r\n\t}\r\n}",
            "select_data": null,
            "suffix_actions_params": null,
            "seq": 100,
            "main_table": "bxretail_store_order",
            "suffix_actions": "refresh",
            "operate_type": "操作",
            "visible": "是",
            "button_name": "打印",
            "service_name": "srvsys_order_print",
            "service_view_name": "打印订单小票",
            "always_show": false,
            "permission": true,
            "application": "retail",
            "action_validate": null,
            "service": "srvretail_store_order_select",
            "is_public": false,
            "path_col": null,
            "proc_step": null,
            "disp_exps": "data.order_state=='已结账'"
          })
        } else if (this.service == 'srvretail_member_info_select') {
          let btns = this.v2FieldsData._formButtons || []
          buttons = btns.filter(item => item.button_name !== '调整积分')
          buttons.push({
            seq: 300,
            "button_name": "发放优惠券",
            "button_type": "give_out_coupon",
            "permission": true
          })
        }
        buttons = buttons.sort((a, b) => a.seq - b.seq)
        return buttons
      },
      childListRun: function() {
        let self = this
        let v2 = self.v2FieldsData || null
        let child = self.deepClone(v2.child_service) || []
        child = child.sort((a, b) => b.seq - a.seq)
        child = child.map((item) => {
          item['mainData'] = self.data
          if (item.hasOwnProperty('foreign_key')) {
            item['_name'] = item.service_name
            item.pkeyProps = {
              pkeyColumn: item.foreign_key.column_name,
              condition: [{
                colName: item.foreign_key.column_name,
                ruleType: "eq",
                value: self.data[item.foreign_key.column_name]
              }],
              serviceName: item.service_name,
              config: {
                serviceName: item.service_name,
                listLayout: "list", // listAndDetail listAndFilter  list
                detailPath: "simple", //  simple  基础的； 或者配置页面路由 路由格式待定
                page: {
                  pageNo: 1,
                  rownumber: 20
                }
              },
              showExpr: item.foreign_key.show_ui_child_table == '是' ? item.foreign_key
                .show_child_list_expr ? item.foreign_key.show_child_list_expr : true : false
            }
            return item
          } else {
            item.pkey = null
          }
          return item
        })
        return child || []

      },
      columnRowConfigRun: function() {
        let config = this.deepClone(this.columnRowConfig)
        for (let item of config) {
          let columns = item.columns
          item["childList"] = []
          if (item.showType == 'childlist' || item.showType == 'formitem') {
            for (let col of columns) {
              if (col.indexOf("child|") !== -1) {
                let colSplist = col.split('|')
                let childName = colSplist[1]
                item.childList.push(childName) // 根据 col 名指定格式配置 “col|service” 获取 子表service 
              }
            }
          }
        }
        return config
      }

    },
    props: {
      detailTop: {
        type: String,
        default: function() {
          return '6rem'
        }
      },
      rowButtons: {
        type: [Array],
        default: function() {
          return []
        }
      },
      detailLoaded: {
        type: [Boolean],
        default: false
      },
      columnRowConfig: {
        type: [Array],
        default: function() {
          return [{
            columns: ['', 'member_name', 'member_phone'],
            showType: "usercard", // usercard datapanel
            section: "",
            label: false,
            colspan: 4, // 列
            buttons: [{
              button_name: "编辑",
              button_type: "edit",
              service: {
                select: "",
                update: "",
                add: "",
                delete: ""
              }
            }]
          }, {
            columns: ['member_level', '#children'],
            showType: "datapanel", // usercard
            section: "",
            label: '会员卡',
            colspan: 12, // 列
            children: [{
              columns: ['balance', 'integral'],
              showType: "datapanel", // usercard
              section: "",
              colspan: 8
            }]
          }]
        }
      },
      itemId: {
        type: [String, Number],
        default: null
      },
      service: {
        type: [String, Number],
        default: null
      },
      buttons: {
        type: [Array],
        default: function() {
          return []
        }
      },
      isEditer: {
        type: [Boolean],
        default: function() {
          return false
        }
      },
      config: {
        type: [Object],
        default: function() {
          return {}
        }
      }
    },
    methods: {
      toCouponDetail(e, srv) {
        this.formService = srv || "srvmkt_member_coupon_select"
        this.formApp = "mkt"
        this.formType = "detail"
        // this.formId = e.id
        this.formId = e.coupon_no
        this.formIdCol = 'coupon_no'
        this.showForm = true
        this.showGiveOutCoupon = false
        // const url = `/pages/public/form/form?type=detail&serviceName=srvmkt_member_coupon_select&id=${e.id}&appName=mkt`

        // uni.navigateTo({
        //   url
        // })
      },
      getAllCoupon() {
        // const service = `srvmkt_coupon_manage_custom_select`
        const service = `srvmkt_coupon_manage_distributable_select`

        const url = `/mkt/select/${service}`
        const req = {
          "serviceName": service,
          "colNames": ["*"],
          "condition": [{
            "colName": "coupon_state",
            "ruleType": "eq",
            "value": "已上架"
          }, {
            "colName": "allow_give_coupon",
            "ruleType": "eq",
            "value": "是"
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 1000
          },
        }
        this.$http.post(url, req).then(res => {
          if (res?.data?.state === 'SUCCESS') {
            this.allCoupon = res.data.data.map(item => {
              item.amount = 0
              return item
            })
          }
        })
      },
      getCouponList1() {
        const service = 'srvmkt_available_member_coupon_select'
        let req = {
          "serviceName": service,
          "colNames": ["*"],
          "condition": [{
              "colName": "member_no",
              "ruleType": "eq",
              "value": this.data?.menber_no
            },
            // {
            //   "colName": "write_off_type",
            //   "ruleType": "eq",
            //   "value": '未核销'
            // }
          ],
          "page": {
            "pageNo": 1,
            "rownumber": 999
          }
        }
        this.$fetch('select', service, req, 'mkt').then((res) => {
          if (res.success) {
            this.couponList1 = res.data
          }
        })
      },
      getCouponList2() {
        const service = 'srvmkt_unable_member_coupon_select'
        let req = {
          "serviceName": service,
          "colNames": ["*"],
          "condition": [{
              "colName": "member_no",
              "ruleType": "eq",
              "value": this.data?.menber_no
            },
            // {
            //   "colName": "write_off_type",
            //   "ruleType": "eq",
            //   "value": '未核销'
            // }
          ],
          "page": {
            "pageNo": 1,
            "rownumber": 999
          }
        }
        this.$fetch('select', service, req, 'mkt').then((res) => {
          if (res.success) {
            this.couponList2 = res.data
          }
        })
      },

      getCouponList(sev = 'srvmkt_member_coupon_select') {
        this.getCouponList1()
        this.getCouponList2()
        return
        // sev = 'srvmkt_member_coupon_available_select'
        sev = 'srvmkt_member_coupon_used_select'
        let req = {
          "serviceName": sev,
          "colNames": ["*"],
          "condition": [{
              "colName": "member_no",
              "ruleType": "eq",
              "value": this.data?.menber_no
            },
            // {
            //   "colName": "write_off_type",
            //   "ruleType": "eq",
            //   "value": '未核销'
            // }
          ],
          "page": {
            "pageNo": 1,
            "rownumber": 999
          }
        }
        if (this.data?.menber_no) {
          this.$fetch('select', sev, req, 'mkt').then((res) => {
            if (res.success) {
              this.couponList = res.data.filter(item => {
                if (!item.coupon_title && !item.discount_num && !item.coupon_type && !item.discount_amount) {
                  return false
                } else {
                  return true
                }
              })
            }
          })
        }
      },
      giveOutCoupon() {
        let data = this.allCoupon.filter((item) => item.amount > 0).map(item => {
          return {
            "coupon_no": item.coupon_no,
            "_release_num": item.amount
          }
        })

        data = data
        let req = [{
          "serviceName": "srvmkt_member_coupon_custom_add",
          "condition": [],
          "data": [{
            "_release_type": "指定会员", // 指定会员  全部会员
            "coupon": data,
            "_menber_list": [this.data.menber_no]
          }]
        }]

        this.$fetch('operate', 'srvmkt_member_coupon_custom_add', req, 'mkt').then((res) => {
          if (res.success) {
            uni.showToast({
              title: "发放成功",
              icon: "none"
            })
            this.showGiveOutCoupon = false
            this.getCouponList()
            this.getDetailV2()
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none"
            })
          }
        })
      },
      getchildDataV2(e) {
        let self = this
        if (this.service == 'srvretail_store_order_select') {
          this.getServiceV2('srvretail_order_detail_select', 'select', 'detaillist').then((res) => {
            this.$set(this, 'orderDetailHeader', res._fieldInfo)
            this.orderchildloaded = true
            this.getChildData('srvretail_order_detail_select', 'orderDetailHeader')
          })
          this.getServiceV2('srvretail_refund_detail_select', 'select', 'detaillist').then((res) => {
            this.refundchildloaded = true
            this.$set(this, 'refundDetailHeader', res._fieldInfo)
            this.getChildData('srvretail_refund_detail_select', 'refundDetailHeader')
          })
        } else if (this.service === 'srvretail_member_info_select') {
          this.getCouponList()
        }

      },
      getChildData(sev, type) {
        let req = {
          "serviceName": sev,
          "colNames": [
            "*"
          ],
          "condition": [{
            "colName": "order_no",
            "ruleType": "eq",
            "value": this.data.order_no
          }],
          "relation_condition": {},
          "page": {
            "pageNo": 1,
            "rownumber": 999
          }
        }
        if (this.refundchildloaded && this.orderchildloaded) {
          this.$fetch('select', sev, req).then((res) => {
            if (res.success && res.data && res.data[0]) {
              let data = res.data
              if (type === 'orderDetailHeader') {
                this.orderDetailData = data.map(item => item)
              } else {
                this.refundDetailData = data.map(item => item)
              }
            }
            // this.faceDataFields = this.deepClone(this.setFieldsDefaultVal(this.v2FieldsData._fieldInfo,this.data)) 
          })
        }


      },
      onSubmitForm() {
        this.formPk = null
        this.isEdit = false
        console.log('onReLoad');
        this.onReLoad()
        this.$emit('data-change')
      },
      getColumnvalue(col, type) {
        let self = this
        let field = this.getColumnField(col, self.faceDataFields).length > 0 ? this.getColumnField(col, self
          .faceDataFields) : self.faceDataFields
        let str = col && col.indexOf('child|') == -1 && col.indexOf('#child') == -1 ? field[0][type] ? field[0][
          type
        ] : '-' : "-"
        if (col.indexOf('_disp') !== -1) {
          str = this.data[col]
          if (col === '_staff_type_disp' && type == 'label') {
            str = '角色权限'
          }
        }
        return str || '--'
      },
      getDetailV2() {
        let self = this
        let srv, srvType, pageType;
        srv = this.service
        srvType = 'detail'
        pageType = 'detail'
        self.getServiceV2(srv, srvType, pageType).then((res) => {
          // self.v2FieldsData = {}
          self.$set(self, 'v2FieldsData', res)
          // for(let col in res){
          // 	self.$set(self.v2FieldsData,col,res.col)
          // }
          self.v2Loaded = true
          console.log("res", res, self.v2FieldsData)
          // self.v2FieldsData = res
          if (self.v2FieldsData) {
            self.getFaceData()
          }
        })
      },
      onReLoad(e) {
        let self = this
        console.log('eeee')
        if (self.v2Loaded) {
          self.getFaceData(e)
        } else {
          self.getDetailV2()
        }
      },
      getFaceData(e) {
        let self = this
        let srv = self.service
        let cond = e || self.conditionRun
        let req = self.selectRequestObjs(srv, cond, null)
        self.$fetch('select', srv, req).then((res) => {
          if (res.success && res.data && res.data[0]) {
            self.data = res.data[0]
            self.getchildDataV2()
          }
          self.faceDataFields = self.deepClone(self.setFieldsDefaultVal(self.v2FieldsData._fieldInfo,
            self.data))
        })
      },
      childExpBuild(mainData, expr) {
        let isShow = false
        isShow = eval(expr || true)
        return isShow
      },
      getChildConfig(_name, child) {
        let c = false
        if (child.service_name == _name) {
          c = true
        }
        return c
      },
      openMemberCharge(e) {
        console.log('会员充值', e)
        this.showVipCharge = true
      },
      closed(refresh = false) {
        this.showUpdateMember = false
        if (refresh === true) {
          this.onReLoad()
          queryMembers()
          this.$emit('data-change')
        }
      },
      openMemberPayDetailed(e) {
        // srv=srvretail_warehousing_select&pageType=add&listLayout=listAndFilter
        let url =
          `/pages/main/memberMge/payDetailed?srv=${e.service_name}&memberNo=${this.data.menber_no}&pageType=add&listLayout=listAndFilter`
        uni.navigateTo({
          url: url
        })
      },
      vipChargeClose(e) {
        console.log('e')
        this.showVipCharge = false
      },
      vipChargeRequest(e) {
        console.log('充值结果', e)
        if (e == '操作成功') {
          this.showVipCharge = false
          this.getFaceData()
          uni.showToast({
            title: '充值成功'
          })
        }
        // this.showVipCharge = false
      },
      dialogToggle(type) {
        this.msgType = type || 'info'
        this.$refs.alertDialog.open()
      },
      dialogConfirm() {
        this.onFormButton(this.avtiveButton, true, true)
      },
      onFormButton(btn, confirm, userconfirm) {
        this.avtiveButton = btn
        console.log(btn)
        let isPopup = confirm || false
        let userConfirm = userconfirm || false
        let submitRequest = false
        let req = [{
          "serviceName": btn.service_name,
          "data": [{
            "order_no": this.data.order_no
          }],
          "srvApp": "retail",
          "condition": [
            // {
            // 	"colName": "id",
            // 	"value": "151",
            // 	"ruleType": "in"
            // }
          ]
        }]
        if (btn?.button_type === "customize") {
          if (btn?.operate_type === '列表跳转') {
            const service = btn.operate_service;
            let {
              condition
            } = btn?.operate_params || {}
            let url =
              `/pages/main/report/overview?serviceName=${service}&title=${btn.button_name}&subtitle=${btn.button_name}`
            if (Array.isArray(condition) && condition.length > 0) {
              condition = condition.map(item => {
                const obj = {
                  colName: item.colName,
                  ruleType: item.ruleType,
                }
                if (item.value?.value_type === 'rowData') {
                  obj.value = this.data[item.value?.value_key]
                } else {
                  obj.value = tem.value?.value
                }
                return obj
              })
              url += `&cond=${JSON.stringify(condition)}`
            }
            uni.navigateTo({
              url
            })
          }
          return
        }
        if (btn.button_type === 'give_out_coupon') {
          // 发放优惠券
          this.getAllCoupon()
          this.showGiveOutCoupon = true
        } else if (btn && btn.service_name == 'srvsys_order_print') {
          submitRequest = true
          req[0].data = [{
            "order_no": this.data.order_no
          }]

        } else if (btn.service_name == 'srvretail_recharge_adjustment_consumption_add') {
          this.openMemberCharge(btn)
        } else if (btn.service_name == 'srvretail_order_pay_record_select') {
          this.openMemberPayDetailed(btn)
        } else if (['srvretail_member_info_update', 'srvretail_member_info_custom_update'].includes(btn
            .service_name)) {
          console.log('showUpdateMember');
          this.showUpdateMember = true
          this.memberActionType = 'update'
          return
        } else if (['srvretail_store_staff_update', 'srvretail_store_staff_custom_update'].includes(btn
            .service_name) &&
          btn.button_name == '编辑') {
          this.isEdit = true
          this.editServiceName = btn.service_name
          this.formPk = this.itemId
        } else if (['srvretail_store_staff_update', 'srvretail_store_staff_custom_update'].includes(btn
            .service_name) &&
          btn.button_name == '设为营业员') {
          req[0].condition = [{
            "colName": "id",
            "value": this.data.id,
            "ruleType": "in"
          }]
          req[0].data = [{
            "business_status": '是'
          }]
          this.dialogName = 'set'
          this.dialogToggle()
          if (isPopup && userConfirm) {
            submitRequest = true
          }
        } else if (['srvretail_store_staff_update', 'srvretail_store_staff_custom_update'].includes(btn
            .service_name) &&
          btn.button_name == '取消营业员') {
          req[0].condition = [{
            "colName": "id",
            "value": this.data.id,
            "ruleType": "in"
          }]
          req[0].data = [{
            "business_status": '否'
          }]
          this.dialogName = 'cancel'
          this.dialogToggle()
          if (isPopup && userConfirm) {
            submitRequest = true
          }
        } else if (btn.service_name == 'srvretail_store_staff_delete' && btn.button_name == '删除') {
          this.dialogName = 'delete'
          this.dialogToggle()
          req[0].condition = [{
            "colName": "id",
            "value": this.data.id,
            "ruleType": "in"
          }]
          if (isPopup && userConfirm) {
            submitRequest = true
          }
        }
        if (submitRequest) {
          this.$fetch('operate', btn.service_name, req).then((res) => {
            this.avtiveButton = null
            console.log(res)
            submitRequest = false
            if (res.success && res.data) {
              uni.showToast({
                icon: "none",
                title: '操作成功'
              })
              console.log('onReload');
              this.onReLoad()
            } else {
              uni.showToast({
                icon: "none",
                title: '操作失败'
              })
            }
            this.$emit('data-change')
          })
        }

      }
    }
  }
</script>
<style lang="scss" scoped>
  .member-detail-box {
    padding: 2rem;
    background-color: #fff;
    margin: 1rem 0;
    flex: 1;
  }

  .list-detail {
    // height: calc(100vh - 8rem - var(--window-bottom));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    &.member {
      height: 100%;
      overflow-y: hidden;

      .member-detail {
        height: 100%;
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
        background-color: #fff;

        ::v-deep .auth {
          border-radius: 0;
        }
      }
    }

    .none-data {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .r-uni-row {
      // background-color: ;
    }

    .uni-card__header-avatar .uni-card__header-avatar-image {
      height: 8rem;
      width: 8rem !important;
    }

    .user-card {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 3rem !important;
      font-weight: 600;
      color: #000;
      padding-top: 1rem;

      .user-thumbnail {
        border-radius: 5rem;
        height: 10rem;
        width: 10rem !important;
      }
    }

    // .usercard{

    // }
    .data-panel-card {
      margin-top: 2rem;
      min-height: 10vh;
      border-radius: 1rem;
      background: linear-gradient(217.39deg, rgba(245, 180, 95, 0.3) 0%, rgba(252, 221, 177, 0.3) 54.86%, rgba(250, 219, 175, 0.3) 80.56%, rgba(247, 197, 126, 0.3) 100%);
      display: flex;
      align-items: center;
      padding: 2rem;

      .form-item {

        &.form-item-column {
          display: flex;
          flex-direction: column;
          align-items: center;

          .form-item-label {
            font-size: 2.1rem;
          }

          .form-item-coutent {
            font-size: 2.8rem;
            font-weight: bold;
          }
        }

        .form-item-label {
          font-size: 2.6rem;
        }

        .form-item-coutent {
          font-size: 2.6rem;
        }
      }
    }



    .data-panel {
      display: flex;
      // flex-direction: column;
      height: 16rem;
      // background-color: $uni-number-color;
      color: #333;
      border-radius: 0.5rem;
      align-items: center;


      .form-item {

        &.form-item-column {
          display: flex;
          flex-direction: column;
          align-items: center;

          .form-item-label {
            font-size: 2.1rem;
          }

          .form-item-coutent {
            font-size: 2.8rem;
            font-weight: bold;
          }
        }

        .form-item-label {
          font-size: 2.6rem;
        }

        .form-item-coutent {
          font-size: 2.6rem;
        }
      }
    }

    .form-item {

      &.form-item-column {

        // display:flex;
        // flex-direction: column;
        // align-items: center;
        .form-item-label {
          font-size: 2.2rem;
        }

        .form-item-coutent {
          font-size: 2.2rem;
          font-weight: bold;
        }
      }

      .form-item-label {
        font-size: $retail-font-size-sm;
        color: $retail-font-color-base;
      }

      .form-item-coutent {
        font-size: $retail-font-size-sm;
        color: $retail-font-color-base;
      }
    }
  }

  .custom-center-popup {
    ::v-deep .a-form {
      max-height: 70vh;
      overflow-y: auto;
    }
  }

  .give-out-dialog {
    width: 80rem;
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .select-coupon {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0 2rem;
    }

    .select-coupon-bottom {
      padding: 2rem 0;
      font-size: 2.4rem;
    }

    .coupon-list-box {
      display: flex;
      flex: 1;
      padding-right: 1rem;

      .full-width {
        width: 100%;
      }
    }

    .coupon-list-item {
      width: 60%;
      flex: 1;
      margin-bottom: 2rem;
      position: relative;

      .title {
        font-size: 2.4rem;
      }
    }

    .popup-title {
      padding: 2rem;

    }

    .padding-lg {
      padding: 2rem;
    }

    .sub-title {
      margin-bottom: 1rem;
    }

    ::v-deep .u-number-box {
      height: 30px !important;
      min-height: 30px;
      line-height: unset;

      .u-number-box__input,
      .uni-input-wrapper,
      .uni-input-placeholder.input-placeholder {
        height: 30px !important;
        min-height: 30px;
        line-height: unset;
        display: inline-block;
      }

      .u-number-box__minus {
        // height: 6.8rem !important;
        // width: 6.8rem;
      }
    }

  }

  .coupon-list {
    font-size: 2.4rem;
    overflow-x: scroll;
    width: 100%;

    &-title {
      font-weight: bold;
      padding: 3rem 0 1rem;
    }

    &-box {
      display: flex;
      flex-wrap: wrap;
      overflow-x: scroll;
      width: 100%;

      &.flex-column {
        flex-wrap: nowrap;
        flex-direction: column;
      }
    }

    &-item {
      width: 37.5rem;
      margin-right: 1.5rem;
      border-radius: 1rem;
      border: 1px solid $retail-color-primary;
      overflow: hidden;
      margin-bottom: 1rem;
      position: relative;

      .top {
        padding: 2rem;
        background-color: #DEF2EA;
        height: 12rem;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &.invalid {
          font-size: 4rem;
          text-align: center;
          color: #A6A6A6;
        }

        .status-badge {
          position: absolute;
          right: 0;
          top: 20%;
          padding: 1rem 2rem;
          border-radius: 2px;
          transform: rotate(50deg);
          border: 1px solid #ccc;
          background-color: #F5F5F5;
          color: #666;
        }

        .type {
          font-size: 2rem;
          padding: 1rem 0 0;
          display: flex;
          justify-content: space-between;
        }

        .title {
          display: flex;
          font-weight: bold;
          justify-content: space-between;

          .right {
            color: $retail-color-primary;
          }
        }
      }

      .bottom {
        font-size: 2rem;
        color: #A6A6A6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;

        .btn {
          width: 6rem;
          height: 4rem;
          line-height: 4rem;
          border-radius: 2rem;
          background: #F5F5F5;
          text-align: center;
          font-size: 2rem;
        }
      }
    }
  }
</style>
